<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top:10%;height: 85%;overflow-y: hidden">
    <template slot="footer">
      <a-button key="back" v-if="isReadOnly" @click="handleCancel">关闭</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" id="userModal">
        <a-row :md="24">
        <template v-for="(item, index) in columns" v-if="opType != 'add' || !item.primaryKey">
            <a-col :md="12" :sm="24">
                <a-form-item v-if="item.editorType == 'SELECT'" :class="item.required ? 'required':'' " :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
                  <a-select :readOnly="!isEditable(item)" :placeholder="item.hint" :dropdownMatchSelectWidth="false" :allowClear="true" :show-search="true"
                    v-decorator="[item.fieldName ]">
                    <a-select-option  v-for="(item,index) in getDictValues(item)" :key="item.valueCode" :value="item.valueCode">
                      {{ item.valueName }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item v-else-if="item.editorType == 'MULTI_SELECT'" :class="item.required ? 'required':'' " :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
                  <a-select mode="multiple" :dropdownMatchSelectWidth="false" :allowClear="true" :show-search="true"
                    v-decorator="[item.fieldName ]">
                    <a-select-option  v-for="(sel,index) in getDictValues(item)" :key="sel.valueCode" :value="sel.valueCode">
                      {{ sel.valueName }}
                    </a-select-option>
                  </a-select>
                 </a-form-item>
                <a-form-item v-else-if="item.editorType == 'tree'" :class="item.required ? 'required':'' " :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
                  <a-tree-select style="width:100%" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}" allow-clear
                     :treeData="orgaTree" :readOnly="!isEditable(item)" :placeholder="item.hint" v-decorator="[ item.fieldName]">
                  </a-tree-select>
                </a-form-item>
                <a-form-item v-else-if="item.editorType == 'date'" :class="item.required ? 'required':'' " :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
                  <jdate v-decorator="[ item.fieldName]" ></jdate>
                  <a-tree-select style="width:100%" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}" allow-clear
                     :treeData="orgaTree" :readOnly="!isEditable(item)" :placeholder="item.hint" v-decorator="[ item.fieldName]">
                  </a-tree-select>
                </a-form-item>
                <a-form-item v-else-if="item.editorType == 'TEXTAREA' " :class="item.required ? 'required':'' " :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
                  <a-textarea :rows="2" :readOnly="!isEditable(item)" :placeholder="item.hint"  v-decorator="[ item.fieldName]"/>
                </a-form-item>
                <a-form-item v-else-if="item.dataType == 'BOOLEAN' " :class="item.required ? 'required':'' " :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
                  <a-radio-group :readOnly="!isEditable(item)" v-decorator="[ item.fieldName ]">
                     <a-radio :value="true">是</a-radio><a-radio :value="false">否</a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item v-else-if="item.editorType == 'DIGIT' " :class="item.required ? 'required':'' " :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
                  <a-input-number :readOnly="!isEditable(item)" v-decorator="[ item.fieldName ]"></a-input-number>
                </a-form-item>
                <a-form-item v-else-if="item.editorType == 'NUMBER' " :class="item.required ? 'required':'' " :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
                  <a-input-number :readOnly="!isEditable(item)" style="width: 100%" v-decorator="[ item.fieldName]" :precision="item.dataLength" :step="calcScale(item.dataScale)" string-mode></a-input-number>
                </a-form-item>
                <a-form-item v-else-if="item.editorType == 'MOBILE' " :class="item.required ? 'required':'' " :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
                  <a-input-number :readOnly="!isEditable(item)" style="width: 100%" :min="11" :max="11" v-decorator="[ item.fieldName ]" :precision="item.dataLength" :step="calcScale(item.dataScale)" string-mode></a-input-number>
                </a-form-item>
                <a-form-item v-else-if="item.editorType == 'DATE' " :class="item.required ? 'required':'' " :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
                  <a-date-picker :readOnly="!isEditable(item)" style="width: 100%" v-decorator="[ item.fieldName]"></a-date-picker>
                </a-form-item>
                <a-form-item v-else-if="item.editorType == 'TIME' " :class="item.required ? 'required':'' " :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
                  <a-time-picker :readOnly="!isEditable(item)" style="width: 100%" v-decorator="[ item.fieldName]"></a-time-picker>
                </a-form-item>
                <a-form-item v-else-if="item.editorType == 'DATE_TIME' " :class="item.required ? 'required':'' " :labelCol="labelCol" :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
                  <a-date-picker :readOnly="!isEditable(item)" style="width: 100%" show-time v-decorator="[ item.fieldName ]"></a-date-picker>               
                </a-form-item>
                <a-form-item v-else :labelCol="labelCol" :class="item.required ? 'required':'' " :wrapperCol="wrapperCol" :label="item.label" :id="item.fieldName">
                  <a-input :readOnly="!isEditable(item)" :placeholder="item.hint" type="item.dataType" :class="!isEditable(item) ? 'readOnly':''" :suffix="item.hint" v-decorator="[ item.fieldName]"/>
                </a-form-item>
            </a-col>
        </template>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
  import pick from 'lodash.pick'
  import Vue from 'vue'
  import JSelectPosition from '@/components/jeecgbiz/JSelectPosition'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import { getAction } from '@/api/manage'
  import {agileTemplate, addUser,editUser,queryOrganizationTreeList,roleAllList} from '@/api/api'
  import { disabledAuthFilter } from "@/utils/authFilter"
  import {duplicateCheck } from '@/api/api'
  import {autoJumpNextInput} from "@/utils/util"
  import JImageUpload from '../../../components/jeecg/JImageUpload'
  import JDate from '@/components/jeecg/JDate'
  // import { JModalMixin } from '@/mixins/JModalMixin'
  export default {
    name: "SimpleEditModal",
    // mixins: [JModalMixin],
    components: {
      JImageUpload,
      JSelectPosition,
      JDate
    },
    props: {
      columns: {
        type: Array,
        required: false
      },
      primaryKey: {
        type: String,
        required: false,
        default: "id",
      },
      dictValues: {
        type: Object,
        required: false,
        default(){
          return {}
        }
      },
	  agilePageCode: {
		  type: String,
		  required: true,
	  }
    },
    computed:{
    },
    data () {
      return {
        title:"操作",
        visible: false,
        modalWidth:800,
        drawerWidth:700,
        isReadOnly: false,
        opType: 'add',
        disableSubmit:false,
        dateFormat:"YYYY-MM-DD",
        validatorRules:{
          loginName:{
            rules: [{
              required: true, message: '请输入登录名称!'
            }]
          },
          username:{
            rules: [{
              required: true, message: '请输入用户姓名!'
            }]
          },
          roleId:{
            rules: [{
              required: true, message: '请选择角色!'
            }]
          }
        },
        model: {
          companyId: 0
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        uploadLoading:false,
        confirmLoading: false,
        headers:{},
        form:this.$form.createForm(this)
      }
    },
    created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token}
    },
    methods: {
      
      add () {
        this.edit();
      },
      edit (record, readOnly) {
        const that = this;
        this.opType = !record ? 'add' : 'edit'
        if(readOnly){
          this.isReadOnly = true;
        }else{
          this.isReadOnly = false;
        }
        this.form.resetFields();
        this.visible = true;
        this.model = Object.assign({}, record);
        this.$nextTick(() => {
          var cns = [];
          for(var idx in this.columns){
            if(this.columns[idx].dataIndex){
              cns.push(this.columns[idx].dataIndex)
            }
          }
          const data = pick(this.model, ...cns);
          for(var idx in this.columns){
            const dst = this.columns[idx].dataSourceType;
            const key = this.columns[idx].dataIndex;
            if(dst == "DICT" || dst == "ENUM" || dst == "TABLE_COLUMN" ){
              if(data[key]){
                data[key] = data[key] + ''; // that.getDictValue(ps, record[key])
              }else{
                delete data[key];
              }
               // that.form.getFieldDecorator(key, { initialValue: record[key]+""})
            }
          }
          this.form.setFieldsValue(data)
        });
      },
      close() {
        this.$emit('close');
        this.visible = false;
        this.disableSubmit = false;
      },
      handleOk() {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let dto = {}
            dto.agilePageCode = that.agilePageCode
            dto.data = Object.assign(this.model, values);
            let obj;
            if(!this.model.id){
              dto.buttonType = 'add'
              obj=agileTemplate.add(dto);              
            }else{
              dto.buttonType = 'update'
              obj=agileTemplate.update(dto);
            }
            obj.then((res)=>{
              if(res.ok){
                that.$emit('ok');
              }else{
                that.$message.warning(res.msg);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })

          }
        })
      },
      handleCancel() {
        this.close()
      },      
      isEditable(column){
        const opType = this.opType;
        if(opType == 'add'){
          return column.insertable
        }else if(opType == 'edit'){
          return column.updateable
        }
        return false
      }
    }
  }
</script>

<style scoped>
.readOnly{border: none;box-shadow: none;background-color: #f0f0f0;}
.required lable{color: red;}
.ant-input-number{width: 100%;}
</style>